<template>
  <div v-for="(item, index) in list">
    <div
      :key="index"
      @dragover.prevent
      @drop.prevent="drop($event, index)"
      draggable="true"
      @dragstart="dragstart($event, index)"
      class="ceshi"
    >{{item}}</div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const list: number[] = ref([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]).value;

// 放到何处
const drop = (ev: DragEvent, index: number): void => {
  const startIndex: number = Number(ev.dataTransfer?.getData('text'));
  const startLi: number = list[startIndex];
  const endLi: number = list[index];
  list.splice(index, 1, startLi); // 放过去
  list.splice(startIndex, 1, endLi); // 反过来
};

//开始移动
const dragstart = (e: DragEvent, index: number): void => {
  e.dataTransfer?.setData;
};
</script>

<style lang="scss" scoped>
.ceshi {
  width: 200px;
  height: 100px;
  background-color: aqua;
}
</style>
